<template>
  <div class="FooterMusic">
    <div class="footerLeft" @click="updataIsShowDetail">
      <img :src="playList[playListIndex].al.picUrl" alt="">
      <div>
        <p>{{ playList[playListIndex].name }}</p>
        <span>横划切换上下首哦</span>
      </div>
    </div>
    <div class="footerRight">
      <svg class="icon" aria-hidden="true" v-if="isbtnShow" @click="play">
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon" aria-hidden="true" v-else @click="play">
        <use xlink:href="#icon-bofang1"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-hanbaobao"></use>
      </svg>
    </div>
    <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
  </div>

  <!-- 歌词弹出框 -->
  <van-popup v-model:show="ShowDetail" position="right" :style="{ height: '100%', width: '100%' }">
    <itemDetail 
    :songDetail="playList[playListIndex]" 
    :getDuration="getDuration"
    :play="play"
    />
  </van-popup>
</template>

<script>
import itemDetail from "@/components/item/itemDetail.vue";
import { mapMutations, mapState } from 'vuex'
export default {
  components: { itemDetail },
  data() {
    return {
      timeInter: 0,
    }
  },
  computed: {
    ...mapState(['playList', 'playListIndex', 'isbtnShow', 'ShowDetail'])
  },
  watch: {
    // 如果点击歌单的歌曲，导致数组下标改变则监视到并执行函数让音乐播放和图标改变
    playListIndex() {
      this.$refs.audio.autoplay = true
      this.updataIsbtnShow(false)
      this.updataTime()
      
    },

    // 切换歌单点击第一首个，下标为0，第一首歌的下标也为0
    // 此时watch中的playListIndex不能监听到，因为下标没有改变
    playList() {
      if (this.isbtnShow) {
        this.$refs.audio.autoplay = true
        this.updataIsbtnShow(false)
        this.updataTime()
      }
    }
  },
  methods: {
    play() {
      // 判断音乐是否播放
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.updataIsbtnShow(false)
        console.log('音频的播放时长：' + (this.$refs.audio.duration / 60).toFixed(2) + '分')
        console.log('音频的播放地址：' + this.$refs.audio.currentSrc)
        // 播放就吧currentTime传到vuex中将当前播放时间进度存下来
        this.updataTime()
      } else {
        this.$refs.audio.pause()
        this.updataIsbtnShow(true)
        // 点击暂停就清楚定时器，
        clearInterval(this.timeInter)
        // console.log('清楚了定时器')
        // console.log(`清楚了定时器${this.timeInter}`)
      }
    },
    getDuration() {
      this.updataDuration(this.$refs.audio.duration)
    },
    updataTime() {
      this.timeInter = setInterval(() => {
        this.updateCurrentTime(this.$refs.audio.currentTime)
        // console.log(`开启了定时器@@@${this.timeInter}`)
      }, 1000);
    },
    ...mapMutations(['updataIsbtnShow',
      'updateCurrentTime',
      'updataDuration', 'updataIsShowDetail']),


  },
  updated() {
    this.getDuration()
    this.$store.dispatch('getLyric', this.playList[this.playListIndex].id)
  }
}
</script>

<style lang="less" scoped>
.FooterMusic {
  width: 100%;
  height: 1.4rem;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid rgba(153, 153, 153, .5);
  display: flex;
  justify-content: space-between;
  padding: 10px;

  .footerLeft {
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
  }

  .footerRight {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .icon {
      width: 30px;
      height: 30px;
    }
  }
}
</style>